<template>
  <div class="preview-report">
    <!-- <div v-if="vHtml" v-html="vHtml" ref="word"></div> -->
    <vue-office-docx :src="src" />
    <el-button icon="el-icon-download" class="down-report" @click="reportHandle('download')" type="primary"
      >下载报告</el-button
    >
  </div>
</template>

<script>
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/docx/lib/index.css";
let { NODE_ENV } = process.env;
import axios from "axios";
export default {
  name: "reportDownload",
  components: { VueOfficeDocx },
  data() {
    return { reportId: "", view: "", user: "", assetType: "", src: "" };
  },
  mounted() {
    let query = this.$route.query;
    this.reportId = query.reportId || "";
    this.user = query.user || "";
    this.assetType = query.assetType || "";
    this.reportHandle("preview");
  },

  methods: {
    reportHandle(type) {
      let origin = "http://10.190.5.192:8083";
      let testEnv = ["development", "prodTest"];
      if (!testEnv.includes(NODE_ENV)) {
        origin = window.location.origin;
      }
      let url = `${origin}/check/download?reportId=${this.reportId}&view=${this.view}&assetType=${
        this.assetType
      }&user=${this.user || "wlliweili_v"}`;
      if (type == "download") {
        window.location.href = url;
      } else {
        this.preview(url);
      }
    },
    // 后端返回二进制流
    preview(url) {
      // 这里需要提起打开弹窗，因为有时很找不到word的ref 会报错
      let loading = this.openLoading(".reportDialog .el-dialog");
      axios({
        method: "get",
        responseType: "blob", // 因为是流文件，所以要指定blob类型
        url, // 自己的服务器，提供的一个word下载文件接口
      }).then(({ data }) => {
        loading.close();
        console.log(data);
        const reader = new FileReader();
        let fileReader = new FileReader();
        fileReader.readAsArrayBuffer(data);
        fileReader.onload = () => {
          this.src = fileReader.result;
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.down-report {
  position: absolute;
  right: 30px;
  margin-top: 10px;
  top: 0px;
}

::v-deep .docx-wrapper {
  background: #fff;
}
</style>
